<template>
  <div class="content">
    <div class="top-breadcrumb">
      <label style="font-size: 15px; margin-right: 5px">视频分类</label>
      <el-select
        v-model="videoClassId"
        placeholder="请选择"
        @change="selectVideoClass"
      >
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <el-button class="upload" type="primary" @click="uploadBtn">
        上传视频
        <i class="el-icon-upload el-icon--right"></i>
      </el-button>
    </div>

    <el-divider content-position="left" class="divider_text"
      >视频列表</el-divider
    >
    <ul class="video-list">
      <!-- 视频列表渲染 -->
      <li v-for="(item, index) in videoList" v-bind:key="item.id">
        <div class="video-item-image" @click="editVideo(item)">
          <img v-if="item.is_top == 1" class="top-label" src="../../../../assets/images/toplabel.png"/>
          <img
            :src="item.image_url"
            :alt="item.title"
            class="video-image"
          />
          <div class="is-expire" v-show="new Date(item.expiration_time).getTime() < Date.now()"></div>
          <div class="play-mask">
            <!-- <img class="play-btn" src="./images/play.png" /> -->
            <span title="复制小程序链接">
            <svg
             class="icon video-message"
              aria-hidden="true"
              @click.stop="copyVideo(index, item)"
            >
              <use xlink:href="#icon-lianjie" />
            </svg>
            </span>
             
            <svg
              v-if="item.is_top == 0"
              class="icon top-video"
              aria-hidden="true"
              @click.stop="topVideo(index, item)"
            >
              <use xlink:href="#icon-zhiding2" />
            </svg>
            <svg
              v-else
              class="icon top-video"
              aria-hidden="true"
              @click.stop="topVideo(index, item)"
            >
              <use xlink:href="#icon-quxiaozhiding" />
            </svg>
            <svg
              class="icon video-del"
              aria-hidden="true"
              @click.stop="delVideo(index, item)"
            >
              <use xlink:href="#icon-shanchu" />
            </svg>
            <div class="play-mask-bg"></div>
          </div>
        </div>
        <span class="video-title">{{ item.title }}</span>
      </li>
    </ul>
    <upload-video ref="uploadVideo"></upload-video>
  </div>
</template>

<script>
import { brandModel } from "../api.js";
import uploadVideo from "./video-upload-components.vue";
export default {
  components: { uploadVideo },
  data() {
    return {
      type_name: "",
      videoList: [],
      options: [],
      videoClassId: '1',
    };
  },
  methods: {
    getOptions() {
      brandModel.getsVideoClass().then(res => {
        if (res.code == 1 && res.data) {
          this.options = res.data.map(item => ({value: item.id, label: item.video_class_name, sort: item.sort})).sort(function(a, b){  
            if (a.sort < b.sort) {  
              return -1 
            } else if (a.sort > b.sort){  
              return 1 
            }  
            return 0
          })
        }
      })
    },
    delVideo(index, item) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "操作提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      }).then(async () => {
        let data = {
          id: item.id,
          image_list: [item.image_url_old],
          video_list: [item.video_url],
        };
        let res = await brandModel.deleteVideo(data);
        if (res.code === 1) {
          //从数组中移除
          this.videoList.splice(index, 1);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        } else {
          this.$message.error(res.msg);
        }
      }).catch((_) => { });
    },
    copyVideo(index, item){
            this.$http.post('/admin/yt_car/index.php?act=yt_car&op=getVideoShortUrl&id='+item.id).
                then(res => {
                 if (res.code == 1) {
                    var cText = res.data.url;
                        var aux = document.createElement("input");
                        aux.setAttribute("value", cText);
                        document.body.appendChild(aux);
                        aux.select();
                        document.execCommand("copy");
                        document.body.removeChild(aux);
                        alert("链接复制成功!");
                    }else {
                        alert(res.msg);
                    }
                })
    },
    async topVideo(index, item) {
      // console.log('isTop:'+item.is_top)
      var top_status = item.is_top == 0 ? 1 : 0;
      // console.log('top_status:'+top_status)
      let data = {
        id: item.id,
        is_top: top_status,
      };
      let res = await brandModel.topVideo(data);
      if (res.code === 1) {
        this.$message({
          type: "success",
          message: "操作成功!",
        });
        this.videoList[index].is_top = top_status;
      } else {
        this.$message.error(res.msg);
      }
    },
    uploadBtn() {
      this.$refs.uploadVideo.init("video_class");
    },
    editVideo(row) {
      this.$refs.uploadVideo.init("video_edit", row);
    },
    //选择视频分类
    selectVideoClass(value) {
      this.videoClassId = value;
      this.getList();
    },
    async getList() {
      let res = await brandModel.getsVideo({ video_class: this.videoClassId });
      if (res.code === 1 && res.data) {
        this.videoList = res.data;
      } else {
        this.videoList = null;
      }
      // console.log("video=========");
    },
  },
  created() {
    this.$parent.tabLists = [{ label: "特色视频", name: "ytcarsHotVideoList" }];
    this.getOptions();
    this.getList();
  },
};
</script>

<style lang="scss" scoped>
.content {
  .top-breadcrumb {
    padding: 15px;
  }
  .upload {
    float: right;
  }
  .divider_text {
    div {
      font-size: 15px;
      font-weight: 600;
    }
  }
  .video-list {
    width: 100%;
    margin-top: 15px;
    li {
      float: left;
      width: 19%;
      max-width: 230.5px;
      margin: 0 0.5% 5px;
      .video-item-image {
        position: relative;
        width: 100%;
        padding-bottom: 134.969325%;
        cursor: pointer;
        .video-image {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          margin: auto;
          display: inline-block;
          overflow: hidden;
          width: 100%;
          height: 100%;
        }
        .top-label {
          position: absolute;
          top: -4px;
          right: 0;
          width: 60px;
          height: 60px;
          z-index: 99;
        }
        .is-expire {
          position: absolute;
          left: 0;
          right: 0;
          top: 0;
          bottom: 0;
          z-index: 66;
          background: url(~@/assets/images/icon_status_expire.png) no-repeat center rgba(0, 0, 0, 0.4);
          background-size: 30%;
        }
        .play-mask {
          position: absolute;
          left: 0;
          bottom: 0;
          width: 100%;
          height: 30px;
          display: none;
          .top-video {
            position: absolute;
            right: 35px;
            bottom: 5px;
            width: 20px;
            height: 20px;
            margin: auto;
            color: #ffffff;
            z-index: 99;
          }
          .top-video:hover {
            color: #ff1515;
          }
          .video-del {
            position: absolute;
            right: 8px;
            bottom: 5px;
            width: 20px;
            height: 20px;
            margin: auto;
            color: #ffffff;
            z-index: 99;
          }
          .video-message:hover {
            color: #ff1515;
          }
          .video-message {
            position: absolute;
            right: 60px;
            bottom: 5px;
            width: 20px;
            height: 20px;
            margin: auto;
            color: #ffffff;
            z-index: 99;
          }
          .video-del:hover {
            color: #ff1515;
          }
          .play-mask-bg {
            width: 100%;
            height: 100%;
            background-color: #000;
            opacity: 0.6;
          }
        }
      }
      .video-item-image:hover {
        .play-mask {
          display: block;
        }
      }
      .video-title {
        display: inline-block;
        font-size: 12px;
        width: 100%;
        height: 45px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        padding: 3px 10px;
      }
    }
  }
}
</style>